<template>
    <div>
        <div id="title">
            <h1>欢迎来到万码招聘后台管理系统</h1>
        </div>
        <el-row :gutter="20" style="margin-left: 10px;">
            <el-col :span="6"><div class="grid-content bg-purple" style="height: 100px;">
                <el-button type="primary" icon="el-icon-user-solid" style="float: left;width: 20%;height: 100%;background-color: #42b983;border: 1px solid #42b983;" size="medium"></el-button>
                <el-col :span="8" >
                <el-card shadow="hover" style="width: 213px;height: 100px;" >
                    <div>注册用户人数</div>
                    <div style="font-family: 'Comic Sans MS';font-size: 30px;color: #99a9bf">{{userCount}}</div>
                </el-card>
            </el-col>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple" style="height: 100px;">
                <el-button type="primary" icon="el-icon-s-goods" style="float: left;width: 20%;height: 100%;"></el-button>
                <el-col :span="8" >
                    <el-card shadow="hover" style="width: 213px;height: 100px;">
                        <div>公司总数</div>
                        <div style="font-family: 'Comic Sans MS';font-size: 30px;color: #99a9bf">{{companyCount}}</div>
                    </el-card>
                </el-col>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple" style="height: 100px;">
                <el-button type="primary" icon="el-icon-s-platform" style="float: left;width: 20%;height: 100%;background-color: aqua;border: 1px solid aqua;"></el-button>
                <el-col :span="8" >
                    <el-card shadow="hover" style="width: 213px;height: 100px;">
                        <div>HR人数</div>
                        <div style="font-family: 'Comic Sans MS';font-size: 30px;color: #99a9bf">{{recruiterCount}}</div>
                    </el-card>
                </el-col>
            </div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple" style="height: 100px;">
                <el-button type="primary" icon="el-icon-s-claim" style="float: left;width: 20%;height: 100%;background-color: chartreuse;border: 1px solid chartreuse;"></el-button>
                <el-col :span="8" >
                    <el-card shadow="hover" style="width: 213px;height: 100px;">
                        <div>成功入职人数</div>
                        <div style="font-family: 'Comic Sans MS';font-size: 30px;color: #99a9bf">{{applyPositionCount}}</div>
                    </el-card>
                </el-col>
            </div></el-col>

        </el-row>
        <div class="container">
            <div id="echart"></div>
        </div>
    </div>
</template>

<script>
    // import * as echarts from 'echarts'
    export default {
        name: "list",
        data(){
            return{
                userCount:0,
                companyCount:0,
                recruiterCount:0,
                applyPositionCount:0,
            }
        },
        created() {
            this.list();
            this.getUserCount();
            this.getCompanyCount();
            this.getRecruiterCount();
            this.getApplyPositionCount();
        },
        mounted() {
            this.drawLine();
        },
        methods: {
            list() {
                this.$axios.get("manage/list").then(response =>
                    console.log(response));
            },
            drawLine() {
                // 初始化echarts实例
                let echart = echarts.init(document.getElementById('echart'))
                // 绘制图表
                echart.setOption({
                    title: { text: '一周内注册人数' },
                    tooltip: {},
                    xAxis: {
                        data: ["周一", "周二", "周三", "周四", "周五", "周六"]
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: ['4', '1', '2', '4', '8', '1','5']
                    }]
                });
            },
            getUserCount(){
                this.$axios.get("/manage/getUserCount").then(response=>{
                    console.log(response.data);
                    this.userCount = response.data.data;
                })
            },
            getCompanyCount(){
                this.$axios.get("/manage/getCompanyCount").then(response=>{
                    console.log(response.data);
                    this.companyCount = response.data.data;
                })
            },
            getRecruiterCount(){
                this.$axios.get("/manage/getRecruiterCount").then(response=>{
                    console.log(response.data);
                    this.recruiterCount = response.data.data;
                })
            },
            getApplyPositionCount(){
                this.$axios.get("/manage/getApplyPositionCount").then(response=>{
                    console.log(response.data);
                    this.applyPositionCount = response.data.data;
                })
            },
        },

    }
</script>

<style scoped>
    #title{
        width: 1200px;
    }
    h1{
        margin-left: 400px;
        font-size: 50px;
        font-family: '宋体';
    }
    #bread{
        margin-left: 50px;
    }
    #echart {
        width: 600px;
        height: 300px;
    }
    .el-row {
        margin-bottom: 20px;
    &:last-child {
         margin-bottom: 0;
     }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
</style>